<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8" />
        <title>Sync scrolling - Editor.md examples</title>
        <link rel="stylesheet" href="${path}plugins/editor.md-master/examples/css/style.css">
        <link rel="stylesheet" href="${path}plugins/editor.md-master/css/editormd.css">
        <script src="${path}plugins/editor.md-master/examples/js/jquery.min.js"></script>
        <script src="${path}plugins/editor.md-master/editormd.min.js"></script>
    </head>
    <body>
        
            <div id="markdown">
                <textarea style="display:none;">[TOC]

#### Setting

config:

```javascript
{
    // true -> bisync, false -> disabled, "single" -> Only editor area sync
    syncScrolling : true | false | "single"
}
```

function:

```javascript
editor.config("syncScrolling", true);
//editor.config("syncScrolling", false);
//editor.config("syncScrolling", "single");
```
</textarea>
            </div>
        </div>
        <!-- <script src="js/jquery.min.js"></script> -->
        
        <script type="text/javascript">
			var testEditor;

            $(function() {
                testEditor = editormd("markdown", {
                    width   : "90%",
                    height  : 360,
                    path    : "${path}plugins/editor.md-master/lib/"
                });
                
                $(".bisync-btn").click(function(){
                    testEditor.config("syncScrolling", true);
                });
                
                $(".single-btn").click(function(){
                    testEditor.config("syncScrolling", "single");
                });
                
                $(".disabled-btn").click(function(){
                    testEditor.config("syncScrolling", false);
                });
            });
        </script>
    </body>
</html>